<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link rel="shortcut icon" href="imgs/favicon.ico" />
    <link rel="stylesheet" href="css/style.css">
    <script type="module" src="js/main/index.js"></script>
</head>
<body id="background">
    <div id="loading" style="display: none;">
        <div>加载中...</div>
    </div>
    <div id="blackBack"></div>
    <div id="click"></div>
    <div id="picurl"></div>
    <div id="oneMain" class="oneMainBefore" >
        <div id="closeButton"><img src="imgs/close.png" id="oneCloseImg"></div>
        <div id="innerMain">
            <div id="oneNum" style="font-size: 0px;"></div>
            <div id="oneTxt" style="font-size: 0px;"></div>
            <div id="oneFrom" style="font-size: 0px;"></div>
        </div>
    </div>
    <div id="changeLink" style="display: none;">
        <div id="linkNum"></div>
        <div class="linkBtn" id="linkChangePadding"><img src="imgs/dLinkIcon.png" id="linkImg" hidden></div>
        <div id="linkImgChange">
            <div id="linkImgName">选择你的图片</div>
            <input type="file" id="linkUpload" accept="image/*">
        </div>
        <div class="linkPadding">
            <div class="paddingButton" id="small">-</div>
            <div id="paddingNum">25</div>
            <div class="paddingButton" id="big">+</div>
        </div>
        <input type="text" placeholder="请输入链接" id="changeLinkInput" value="http://">
        <div id="useLink">确认</div>
        <div id="closeChangeLink">关闭</div>                
    </div>
    <div id="toast" style="display: none;">
        <div id="Msg"></div>
        <div id="toastButton">确认</div>
    </div>
    <div id="settingMain" class="settingMainBefore" >
        <div id="backSettingMenus"  style="display: none;">
            <div id="backSettingMenu">
                <img src="imgs/to.png" id="backSettingImg">
            </div>
            <div id="backSettingMenuName"></div>
        </div>
        <div id="settingCloseButton" style="display: none;"><img src="imgs/close.png" id="settingCloseImg"></div>
        <div id="settingMenu" style="display: none;">
            <div class="settingTitle">设置</div>
            <div class="mainSettings">
                <div class="settingBtn" id="backgroundSettings"">背景<img src="imgs/to.png"></div>
                <div class="settingBtn" id="festuresSettings">功能<img src="imgs/to.png"></div>
                <div class="settingBtn" id="linkSettings">书签<img src="imgs/to.png"></div>
                <div class="settingBtn" id="searchSettings">搜索引擎<img src="imgs/to.png"></div>
            </div>
            <div class="mainSettings">
                <div class="settingBtn" id="otherSettings">其他设置<img src="imgs/to.png"></div>
            </div>
            <div class="mainSettings">
                <div class="settingBtn" id="helpInfo">帮助 Q&A<img src="imgs/to.png"></div>
                <div class="settingBtn" id="donateInfo">捐赠<img src="imgs/to.png"></div>
            </div>
        </div>
        <div id="settingInnerMain" style="display: none;">
            <div class="settingInner">
                <div id="backgroundSetting" class="settingInnerTitle">
                    <div class="settingsInnerTitle">
                        背景设置
                    </div>
                    <div class="backgroundTitile">选择图片</div>
                    <div class="uploadBtn" id="uploadBtn">
                        <div id="fileName">选择你的图片</div>
                        <input type="file" id="backgroundUpload" accept="image/*">
                    </div>
                    <div class="backgroundTitile">在线图片</div>
                    <div class="onlinePic" id="onlinePic">
                        <input type="text" id="onlinePicUrl" placeholder="请输入一个图片链接">
                        <div id="review">预览</div>
                    </div>
                    <div id="picError"></div>
                    <img src="" id="viewImg" style="display: none;">
                    <div id="apiImg">
                        <div class="backgroundTitile">自动切换图片</div>
                        <div id="apiImgs">
                            <div class="apiImgButton" id="bingImg">Bing 每日一图</div>
                            <div class="apiImgButton" id="cwImg">东方 Project</div>
                        </div>
                        <div id="mobileApiImgs" style="display: none;">
                            <div class="apiImgButton" id="bingImgMobile">Bing 每日一图</div>
                            <div class="apiImgButton" id="cwImgMobile">东方 Project</div>
                        </div>
                        <div class="cusApiImg">
                            <input type="text" placeholder="请输入你需要的 api 链接" id="cusApiPic">
                            <div class="otherFeatures" id="cusImgApi">确定</div>
                        </div>
                    </div>
                    <div id="exImg">
                        <div class="backgroundTitile">本地图片</div>
                        <div class="exImgs" id="exImgs">
                            <img id="background0" src="imgs/background - 0.jpg">
                            <img id="background1" src="imgs/background - 1.jpg">
                            <img id="background2" src="imgs/background - 2.jpg">
                            <img id="background3" src="imgs/background - 3.jpg">
                            <img id="background4" src="imgs/background - 4.jpg">
                            <img id="background5" src="imgs/background - 5.jpg">
                        </div>
                        <div class="mobileExImgs" style="display: none;">
                            <img id="mbackground1" src="imgs/mobile/background - 1.jpg">
                            <img id="mbackground2" src="imgs/mobile/background - 2.jpg">
                            <img id="mbackground3" src="imgs/mobile/background - 3.jpg">
                            <img id="mbackground4" src="imgs/mobile/background - 4.jpg">
                            <img id="mbackground5" src="imgs/mobile/background - 5.jpg">
                        </div>
                    </div>
                    <div class="backgroundButtons">
                        <div id="backgroundSetButton" hidden>设置为此图片</div>
                        <div id="backgroundBefore">恢复默认</div>
                    </div>
                </div>
                <div id="festuresSetting" class="settingInnerTitle" style="display: none;">
                    <div class="settingsInnerTitle">
                        功能设置
                    </div>
                    <div class="backgroundTitile">设置隐藏/显示功能按钮</div>
                    <div class="featureSetting">
                        <div class="featureBtns">
                            <div class="featuresTitle">
                                <div class="featuresBtn"><img src="imgs/hide.png" class="feaImg"></div>
                                <div class="featureNames">隐藏全部</div>
                            </div>
                            <div class="hsFeatures" id="hideHS">显示</div>
                        </div>
                        <div class="featureBtns" id="historyFeatureBtn">
                            <div class="featuresTitle">
                                <div class="featuresBtn"><img src="imgs/fy_ic_history.png" class="feaImg"></div>
                                <div class="featureNames">历史记录</div>
                            </div>
                            <div class="hsFeatures" id="historyHS">显示</div>
                        </div>
                        <div class="featureBtns">
                            <div class="featuresTitle">
                                <div class="featuresBtn"><img src="imgs/reload.png" class="feaImg"></div>
                                <div class="featureNames">刷新</div>
                            </div>
                            <div class="hsFeatures" id="reloadHS">显示</div>
                        </div>
                        <div class="featureBtns">
                            <div class="featuresTitle">
                                <div class="featuresBtn"><img src="imgs/calculator.png" class="feaImg"></div>
                                <div class="featureNames">计算器</div>
                            </div>
                            <div class="hsFeatures" id="calHS">显示</div>
                        </div>
                        <div class="featureBtns" id="clockFeatureBtn">
                            <div class="featuresTitle">
                                <div class="featuresBtn"><img src="imgs/timer.png" class="feaImg"></div>
                                <div class="featureNames">时钟</div>
                            </div>
                            <div class="hsFeatures" id="timeHS">显示</div>
                        </div>
                        <div class="featureBtns" id="clockFeatureBtn">
                            <div class="featuresTitle">
                                <div class="featuresBtn"><img src="imgs/weather/01.png"></div>
                                <div class="featureNames">天气</div>
                            </div>
                            <div class="hsFeatures" id="weatherHS">显示</div>
                        </div>
                        <div class="featureBtns">
                            <div class="featuresTitle">
                                <div class="featuresBtn"><img src="imgs/down.png" class="feaImg"></div>
                                <div class="featureNames">下载背景</div>
                            </div>
                            <div class="hsFeatures" id="downHS">显示</div>
                        </div>
                        <div class="featureBtns">
                            <div class="featuresTitle">
                                <div class="featuresBtn"><img src="imgs/info.png" class="feaImg"></div>
                                <div class="featureNames">关于</div>
                            </div>
                            <div class="hsFeatures" id="infoHS">显示</div>
                        </div>
                        <div class="featureBtns">
                            <div class="featuresBtn" style="width: 70px; border-radius: 30px; text-align: center; font-size: 17px; line-height: 30px;">一言</div>
                            <div class="hsFeatures" id="oneHS">显示</div>
                        </div>
                    </div>
                </div>
                <div id="linkSetting" class="settingInnerTitle" style="display: none;">
                    <div class="settingsInnerTitle">
                        书签设置
                    </div>
                    <div class="backgroundTitile">设置书签的显示/隐藏，以及自定义书签</div>
                    <div class="featureSetting">
                        <div class="featureBtn">
                            <div class="linkBtn" id="link1Paddings"><img src="imgs/google.png" id="link1Imgs"></div>
                            <div class="changeFeature" id="link1CH">自定义</div>
                            <div class="hsFeature" id="link1HS">显示</div>
                        </div>
                        <div class="featureBtn">
                            <div class="linkBtn" id="link2Paddings"><img src="imgs/youtube.png" id="link2Imgs"></div>
                            <div class="changeFeature" id="link2CH">自定义</div>
                            <div class="hsFeature" id="link2HS">显示</div>
                        </div>
                        <div class="featureBtn">
                            <div class="linkBtn" style="padding: 15px; width: 70px; height: 70px;" id="link3Paddings"><img src="imgs/bing-logo.png" id="link3Imgs"></div>
                            <div class="changeFeature" id="link3CH">自定义</div>
                            <div class="hsFeature" id="link3HS">显示</div>
                        </div>
                        <div class="featureBtn">
                            <div class="linkBtn" style="padding: 20px; height: 60px; width: 60px;" id="link4Paddings"><img src="imgs/baidu.png" id="link4Imgs"></div>
                            <div class="changeFeature" id="link4CH">自定义</div>
                            <div class="hsFeature" id="link4HS">显示</div>
                        </div>
                        <div class="featureBtn">
                            <div class="linkBtn" style="padding: 15px; width: 70px; height: 70px;" id="link5Paddings"><img src="imgs/icon_bilibili-circle.png" id="link5Imgs"></div>
                            <div class="changeFeature" id="link5CH">自定义</div>
                            <div class="hsFeature" id="link5HS">显示</div>
                        </div>
                        <div class="featureBtn" id="link6Btn">
                            <div class="linkBtn" style="padding: 10px; width: 80px; height: 80px;" id="link6Paddings"><img src="imgs/IThome.png" id="link6Imgs"></div>
                            <div class="changeFeature" id="link6CH">自定义</div>
                            <div class="hsFeature" id="link6HS">显示</div>
                        </div>
                        <div class="featureBtn" id="link7Btn">
                            <div class="linkBtn" id="link7Paddings"><img src="imgs/Chrome_Web_Store_logo_2012-2015.svg.png" id="link7Imgs"></div>
                            <div class="changeFeature" id="link7CH">自定义</div>
                            <div class="hsFeature" id="link7HS">显示</div>
                        </div>
                        <div class="featureBtn" id="link8Btn">
                            <div class="linkBtn" style="padding: 20px; height: 60px; width: 60px;" id="link8Paddings"><img src="imgs/aliyun.png" id="link8Imgs"></div>
                            <div class="changeFeature" id="link8CH">自定义</div>
                            <div class="hsFeature" id="link8HS">显示</div>
                        </div>
                        <div class="featureBtn" id="link9Btn">
                            <div class="linkBtn" id="link9Paddings"><img src="imgs/azure-blue.png" id="link9Imgs"></div></a>
                            <div class="changeFeature" id="link9CH">自定义</div>
                            <div class="hsFeature" id="link9HS">显示</div>
                        </div>
                        <div class="featureBtn">
                            <div class="linkBtn" id="link10Paddings"><img src="imgs/GitHub.png" id="link10Imgs"></div>
                            <div class="changeFeature" id="link10CH">自定义</div>
                            <div class="hsFeature" id="link10HS">显示</div>
                        </div>
                    </div>
                </div>
                <div id="searchSetting" class="settingInnerTitle" style="display: none;">
                    <div class="settingsInnerTitle">
                        搜索引擎
                    </div>
                    <div class="backgroundTitile">设置搜索引擎的显示/隐藏</div>
                    <div class="seaBtn" style="margin-top: 10px;">
                        <div class="seaName">
                            <div id="cusImg">
                                <img src="imgs/search.png" class="seaImg searchImg">
                            </div>
                            <div class="seaTitle">自定义搜索引擎</div>
                        </div>
                        <div class="otherFeaturesBefore" id="cusAn">禁用</div>
                    </div>
                    <div class="seaBtn seaIn" id="seaIn" style="display: none;">
                        <input type="text" id="cusSeaIn" placeholder="请输入自定义搜索链接">
                        <div class="otherFeatures" id="setCus">确定</div>
                    </div>
                    <div class="seaBtn" style="margin-top: 10px;">
                        <div class="seaName">
                            <img src="imgs/google.png" class="seaImg">
                            <div class="seaTitle">Google</div>
                        </div>
                        <div class="otherFeatures" id="googleAn">显示</div>
                    </div>
                    <div class="seaBtn">
                        <div class="seaName">
                            <img src="imgs/bing-logo.png" class="seaImg">
                            <div class="seaTitle">必应</div>
                        </div>
                        <div class="otherFeatures" id="bingAn">显示</div>
                    </div>
                    <div class="seaBtn">
                        <div class="seaName">
                            <img src="imgs/baidu.png" class="seaImg">
                            <div class="seaTitle">百度</div>
                        </div>
                        <div class="otherFeatures" id="baiduAn">显示</div>
                    </div>
                    <div class="seaBtn">
                        <div class="seaName">
                            <img src="imgs/ddg.svg" class="seaImg">
                            <div class="seaTitle">Duckduckgo</div>
                        </div>
                        <div class="otherFeaturesBefore" id="ddgAn">隐藏</div>
                    </div>
                    <div class="seaBtn">
                        <div class="seaName">
                            <img src="imgs/yandex.png" class="seaImg">
                            <div class="seaTitle">Yandex</div>
                        </div>
                        <div class="otherFeaturesBefore" id="yandexAn">隐藏</div>
                    </div>
                    <div class="seaBtn">
                        <div class="seaName">
                            <img src="imgs/sougou.png" class="seaImg">
                            <div class="seaTitle">搜狗</div>
                        </div>
                        <div class="otherFeaturesBefore" id="sougouAn">隐藏</div>
                    </div>
                </div>
                <div id="otherSetting" class="settingInnerTitle" style="display: none;">
                    <div class="settingsInnerTitle">
                        其他设置
                    </div>
                    <div class="otherBtn">
                        <div class="otherName">加载动画</div>
                        <div class="otherFeaturesBefore" id="loadingAn">隐藏</div>
                    </div>
                    <div class="loadingTimeBtn" id="loadingTimeBtn" style="display: none;">
                        <div class="loadingTimeTitle">加载动画时间设置</div>
                        <div class="nowTime">
                            当前的加载时间为：<div id="newTimeout"></div>ms
                        </div>
                        <div class="loadingTimeSetting">
                            <input type="text" id="loadingTimeNum" placeholder="注：单位为毫秒">
                            <div class="ms">ms</div>
                            <div class="otherFeatures" id="setLoadingTime">设置时间</div>
                        </div>
                    </div>
                    <div class="otherBtn">
                        <div class="otherName" id="colorMode">颜色模式</div>
                        <div class="setDl">
                            <div class="otherFeatures" id="reDlAn">跟随系统</div>
                            <div class="otherFeaturesBefore" id="dlAn">亮色</div>
                        </div>
                    </div>
                    <div class="otherBtn blackBackShowBack" style="display: none;">
                        <div class="dlMore" style="margin-bottom: 10px;">
                            <div class="otherName" id="colorMode">是否显示暗色壁纸遮罩</div>
                            <div class="otherFeatures" id="blackBackShow">显示</div>
                        </div>
                        <div id="backAlpha">当前背景暗色遮罩深度为：</div>
                        <div class="dlMore">
                            <input type="text" placeholder="请输入暗色遮罩程度：00-FF" id="blackBackColor">
                            <div class="otherFeatures" id="setBackAlpha">确定</div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="helpMain" class="otherInfo" style="display: none;">
                <div class="settingsInnerTitle">
                    <div class="helpTitle">帮助 Q&A</div>
                </div>
                <div class="helpInner">
                    <div class="helpBox">
                        <div class="helpQ">Q：如何切换搜索引擎？</div>
                        <div class="helpA">A：点击搜索框最左边的的搜索引擎图标可以更换搜索引擎，默认包括：Google、bing、百度，也可在设置中添加其他搜索引擎使用。</div>
                    </div>
                    <div class="helpBox">
                        <div class="helpQ">Q：显示“在线图片加载失败，已加载内建图片”是什么原因？</div>
                        <div class="helpA">A：因为您的网络可能未能及时获取到背景图片的链接，刷新一下可以尝试重新获取。</div>
                    </div>
                    <div class="helpBox">
                        <div class="helpQ">Q：书签自定义链接无效是什么原因？</div>
                        <div class="helpA">A：请以 “http://” 或 “https://” 为开头设置连接，其他形式的连接无效。</div>
                    </div>
                    <div class="helpBox">
                        <div class="helpQ">Q：如何恢复原书签位的书签？</div>
                        <div class="helpA">A：以空白为连接设置即可恢复原书签位书签。</div>
                    </div>
                </div>
            </div>
            <div id="donateMain" class="otherInfo" style="display: none;">
                <div class="settingsInnerTitle">
                    <div class="donateTitle">捐赠</div>
                </div>
                <div class="donateInner">
                    <div class="donateMsg">如果你觉得这个项目帮到你的话可以请我喝杯咖啡吗？</div>
                    <div class="donateImg" id="donateImg">
                        <img class="dotImg" src="imgs/donate/donate1.png">
                        <img class="dotImg" src="imgs/donate/donate2.jpg">
                        <img class="dotImg" src="imgs/donate/donate3.png">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- This is top-right button -->
    <div class="title" id="title" style="top: 0;">
        <div class="titleButton" id="hide" hidden><img src="imgs/hide.png" id="hideImg"></div><!--hide button-->
        <div class="titleButton" id="history" hidden><img src="imgs/fy_ic_history.png" id="historyImg"></div><!--history button-->
        <div class="titleButton" id="reload" hidden><img src="imgs/reload.png" id="reloadImg"></div><!--reload button-->
        <div class="titleButton" id="cal" hidden><img src="imgs/calculator.png" id="calImg"></div><!--calculator button-->
        <div class="titleButton" id="clock" hidden><img src="imgs/timer.png" id="clockImg"></div><!--clock button-->
    </div>
    <!-- This is top-left button -->
    <div class="top-left" id="top-right" style="top: 0;">
        <div class="topButton" id="settings" hidden><img src="imgs/setting.png" id="settingImg"></div><!--settings button-->
        <div class="topButton" id="weather" style="display: none;">
            <img id="weatherImg" hidden>
            <div id="weatherMain" style="display: none;">
                <div class="weatherCity">
                    <input type="text" id="weatherCityIn" placeholder="当前城市：">
                    <div id="weatherCityUp">确定</div>
                </div>
                <div class="dayWeather" id="dayWeather">
                    <div id="todayWeather"></div>
                    <div id="todayWeathertemp"></div>
                    <div class="feaWeather">
                        <div class="feaWeatherbox">
                            <div id="time2" class="weatherTime"></div>
                            <div id="day2Weather"></div>
                            <img src="" id="day2Img" style="width: 30px; height: 30px;">
                            <div id="day2Temp"></div>
                        </div>
                        <div class="feaWeatherbox">
                            <div id="time3" class="weatherTime"></div>
                            <div id="day3Weather"></div>
                            <img src="" id="day3Img" style="width: 30px; height: 30px;">
                            <div id="day3Temp"></div>
                        </div>
                        <div class="feaWeatherbox">
                            <div id="time4" class="weatherTime"></div>
                            <div id="day4Weather"></div>
                            <img src="" id="day4Img" style="width: 30px; height: 30px;">
                            <div id="day4Temp"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- This is bottom-right button -->
    <div class="bottom-right" id="bottom-right" style="bottom: 0;">
        <div class="bottomButton" id="down" hidden><img src="imgs/down.png" id="downImg"></div><!--download button-->
        <div class="bottomButton" id="info" hidden><img src="imgs/info.png" id="infoImg"></div><!--info button-->
    </div>
    <!-- This is history bar -->
    <div class="bar" id="bar">
        <div class="historyButton">
            <div class="historyback" id="historyback">
                <img id="imgbefore" src="imgs/back_black.png">
            </div>
        </div>
        <div id="historyIn"></div>
    </div>
    <!-- This is info bar -->
    <div class="bar" id="infoBar">
        <div class="infoButton">
            <div class="infoBack" id="infoBack">
                <img id="infoimgbefore" src="imgs/back_black.png">
            </div>
        </div>
        <div class="infoMain">
            <div class="infoTitle">关于 uyou 新标签页</div>
            <img src="../extension.png" class="infoImg">
            <div class="infoTxt">
                在这个新标签页扩展的开源链接上我会提供非稳定版的更新，如果想要提前尝试新功能可以去这个项目上下载源码自行安装
            </div>
            <div class="infoTxt">
                <div>这个新标签页扩展来自于我的另一个前端项目，这个项目的开源地址为：</div>
                <a href="https://github.com/tonylu110/browserNewTabPage" target="view_window">点击前往</a>
                <div style="margin-top: 15px;">如果你感兴趣可以去这个项目上给我一个 star，此标签页扩展的开源地址为：</div>
                <a href="https://github.com/tonylu110/uyouNewTab" target="view_window">点击前往</a>
            </div>
            <div class="infoTxt">
                <div>我的 GitHub 地址：</div>
                <a href="https://github.com/tonylu110" target="view_window">点击前往</a>
                <div style="margin-top: 10px;">我的 酷安 账号：</div>
                <img src="imgs/coolapk.png">
                <a href="http://www.coolapk.com/u/1126752" target="view_window">点击前往</a>
                <div style="margin-top: 10px;">欢迎加群讨论：</div>
                <img src="imgs/qq.jpg">
                <a href="https://jq.qq.com/?_wv=1027&k=B8k42CI9" target="view_window">点击前往</a>
            </div>
        </div>
    </div>
    <!-- This is searchmain area -->
    <div class="main" id="main">
        <div class="searchbar" id="searchbar" style="display: none;"><!--search bar-->
            <img id="searchEngine" hidden>
            <input type="text" id="keywords">
            <div class="keywordsRight" style="display: none;"></div>
            <div id="searchBtn" style="color: transparent;">搜索</div>
        </div>
        <!-- This is moreSearch area -->
        <div class="moreSearch" id="moreSearch" style="opacity: 0.0;">
            <div class="searchEngines" id="searchEngines"><!--set search engine-->
                <div id="cus" style="display: none;"><img src="imgs/search.png"></div>
                <div id="google"><img src="imgs/google.png"></div><!--google-->
                <div id="bing" style="padding: 15px; width: 70px; height: 70px;"><img src="imgs/bing-logo.png" style="width: 70px; height: 70px;"></div><!--bing-->
                <div id="baidu" style="padding: 20px; height: 60px; width: 60px;"><img src="imgs/baidu.png" style="width: 60px; height: 60px;"></div><!--baidu-->
                <div id="ddg" style="display: none;"><img src="imgs/ddg.svg"></div>
                <div id="yandex" style="display: none;"><img src="imgs/yandex.png"></div>
                <div id="sougou" style="display: none;"><img src="imgs/sougou.png"></div>
            </div>
        </div>

        <div class="link" id="mainlink"><!--links-->
            <a href="https://google.com" id="link1" style="display: none;"><div id="link1Padding"><img src="imgs/google.png" id="link1Img" hidden></div></a><!--google link-->
            <a href="https://youtube.com" id="link2" style="display: none;"><div id="link2Padding"><img src="imgs/youtube.png" id="link2Img" hidden></div></a><!--youtube link-->
            <a href="https://bing.com" id="link3" style="display: none;"><div style="padding: 15px; width: 70px; height: 70px;" id="link3Padding"><img src="imgs/bing-logo.png" id="link3Img" hidden></div></a><!--bing link-->
            <a href="https://baidu.com" id="link4" style="display: none;"><div style="padding: 20px; height: 60px; width: 60px;" id="link4Padding"><img src="imgs/baidu.png" id="link4Img" hidden></div></a><!--baidu link-->
            <a href="https://bilibili.com" id="link5" style="display: none;"><div style="padding: 15px; width: 70px; height: 70px;" id="link5Padding"><img src="imgs/icon_bilibili-circle.png" id="link5Img" hidden></div></a><!--bilibili link-->
            <a href="https://ithome.com" id="ithome" style="display: none;"><div style="padding: 10px; width: 80px; height: 80px;" id="link6Padding"><img src="imgs/IThome.png" id="link6Img" hidden></div></a><!--ithome link-->
            <a href="https://chrome.google.com/webstore/category/extensions" id="chromeStore" style="display: none;"><div id="link7Padding"><img src="imgs/Chrome_Web_Store_logo_2012-2015.svg.png" id="link7Img" hidden></div></a><!--chrome web store link-->
            <a href="https://www.aliyun.com/" id="aliyun" style="display: none;"><div style="padding: 20px; height: 60px; width: 60px;" id="link8Padding"><img src="imgs/aliyun.png" id="link8Img" hidden></div></a><!--aliyun link-->
            <a href="https://azure.microsoft.com/zh-cn/" id="azure" style="display: none;"><div id="link9Padding"><img src="imgs/azure-blue.png" id="link9Img" hidden></div></a><!--azure link-->
            <a href="https://github.com" id="link10" style="display: none;"><div id="link10Padding"><img src="imgs/GitHub.png" id="link10Img" hidden></div></a><!--github link-->
        </div>
    </div>
    <!-- This is calculator area -->
    <div class="mainCal" id="mainCal" hidden>
        <form class="card" name="cal" action="" id="card"><!--calculator card-->
            <input type="text" class="value" id="txt" readonly="readonly" />
            <span class="clear" id="clear" style="margin-left: 10px;">c</span>
            <span class="num" id="/">/</span>
            <span class="num" id="*" style="margin-right: 10px;">*</span>
            <span class="num" id="7" style="margin-left: 10px;">7</span>
            <span class="num" id="8">8</span>
            <span class="num" id="9">9</span>
            <span class="num" id="-">-</span>
            <span class="num" id="4" style="margin-left: 10px;">4</span>
            <span class="num" id="5">5</span>
            <span class="num" id="6">6</span>
            <span class="num" id="+">+</span>
            <span class="num" id="1" style="margin-left: 10px;">1</span>
            <span class="num" id="2">2</span>
            <span class="num" id="3">3</span>
            <span class="num" id="0">0</span>
            <span class="num" id="00" style="margin-left: 10px;">00</span>
            <span class="num" id=".">.</span>
            <span class="result" id="result">=</span>
        </form>
    </div>
    <!-- This is Clock area -->
    <div class="mainClock" id="mainClock" style="display: none;">
        <div id="time"></div>
    </div>
    <a class="button" id="button"></a>
</body>
</html>